//简写
$(function () {
  //删除按钮点击事件
  $("ul").on("click", ".del", function () {
    $(this).parent("li").remove();
    sort(); //调用排序的方法
  });
  //上按钮点击事件
  $("ul").on("click", ".up", function () {
    //获取当前li
    let cli = $(this).parents("li");
    //获取上一个li
    let uli = $(this).parents("li").prev();
    uli.before(cli);
    sort(); //调用排序的方法
  });
  //下按钮点击事件
  $("ul").on("click", ".down", function () {
    //获取当前li
    let cli = $(this).parents("li");
    //获取下一个li
    let dli = $(this).parents("li").next();
    dli.after(cli);
    sort(); //调用排序的方法
  });
  //添加选项按钮点击事件
  $(".add").click(function () {
    let span = $("<span/>");
    let input = $("<input/>");
    let btn1 = $('<button class="up"/>').text("↑");
    let btn2 = $('<button class="down"/>').text("↓");
    let btn3 = $('<button class="del"/>').text("del");
    let li = $("<li/>");
    li.append(span);
    li.append(input);
    li.append(btn1);
    li.append(btn2);
    li.append(btn3);
    $("ul").append(li);
    sort(); //调用排序的方法
  });
  //排序方法
  let str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  function sort() {
    //循环ul里面的所有li
    $("ul>li").each(function (index, li) {
      //给li里面的span标签添加序号
      $(li)
        .find("span")
        .text(str[index] + ".");
      //第一个li里面的上按钮禁用
      if (index === 0) {
        $(li).find("button:eq(0)").prop("disabled", true);
      } else {
        $(li).find("button:eq(0)").prop("disabled", false);
      }
      //最后一个li里面的下按钮禁用
      if (index === $("ul>li").length - 1) {
        $(li).find("button:eq(1)").prop("disabled", true);
      } else {
        $(li).find("button:eq(1)").prop("disabled", false);
      }
    });
  }
  sort();
});
